<template>
  <div class="container">
    <title-head1 :title="'实时统计'"></title-head1>

    <div class="group">
      <div class="item" v-for="(item,index) in data" :key="index">
        <div class="img_group">
          <img :src="item.img" style="width: 100%;height: 100%;"/>
        </div>
        <div style="margin-left: 15px;height: 70px">
          <div>
            {{ item.title }}
          </div>
          <div :style="{ color: item.color }" style="margin-top: 15px;height: 20px;font-size: 20px">
            {{ item.value }}
            <span style="font-size: 12px"> {{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleHead1 from "@/components/TitleHead1.vue";
import {reactive, ref} from "vue";


const data = ref<any>([
  {
    'img': 'public/images/statistics1.png', 'title': '充电站总数', 'value': 399, 'unit': '/个', 'color': '#0BEAC0'
  },
  {'img': 'public/images/statistics2.png', 'title': '充电桩总数', 'value': 2302, 'unit': '/个', 'color': '#FFFF55'},
  {'img': 'public/images/statistics3.png', 'title': '累计充电总量', 'value': 15302, 'unit': '/kw', 'color': '#20FFFF'},
  {'img': 'public/images/statistics4.png', 'title': '累计充电总时长', 'value': 999.3, 'unit': '/h', 'color': '#FBA4A9'},
])
</script>

<style scoped>

.group {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;


}

.item {
  border-radius: 15px;
  background: #0A1A4C;
  width: 48.5%;
  margin-top: 14px;
  display: flex;
  align-items: center;

}

.img_group {
  width: 50px;
  height: 50px;
  padding: 13px;
  margin-left: 15px;
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  background: rgba(253, 253, 253, 0.088);
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0; /* 设置上下边距 */
}
</style>